import type { TableColumnProps } from 'ant-design-vue'
import { getAppSettingItems } from '@/apis/app-manage'
import { Button, Drawer, Input, InputNumber, Select, Space, Switch, Table, Textarea } from 'ant-design-vue'
import AppSettingItemsEdit from './AppSettingItemsEdit'
import AppSettingItemsView from './AppSettingItemsView'

export const ComponentMap = {
  AioInput: Input,
  AioInputNumber: InputNumber,
  AioSelect: Select,
  AioSwitch: Switch,
  AioTextarea: Textarea,
}

export default defineComponent({
  emits: ['success'],
  setup(_, { expose }) {
    const open = ref(false)
    const appSettingItemsView = useTemplateRef<any>('appSettingItemsView')
    const appSettingItemsEdit = useTemplateRef<any>('appSettingItemsEdit')

    const appRow = ref<any>(null)

    provide('appRow', appRow)

    const columns: TableColumnProps[] = [
      {
        title: '配置项',
        dataIndex: 'description',
        key: 'key',
        align: 'center',
      },
      {
        title: '操作',
        dataIndex: 'action',
        width: 200,
        align: 'center',
        customRender: ({ record }) => (
          <Space>
            <Button ghost type="primary" size="small" onClick={() => appSettingItemsView.value.open(record)}>查看</Button>
            <Button ghost type="primary" size="small" onClick={() => appSettingItemsEdit.value.open(record)}>编辑</Button>
          </Space>
        ),
      },
    ]
    const dataSource = ref([])
    expose({
      async open(row: any) {
        appRow.value = row
        open.value = true
      },
    })

    async function initSettingItems() {
      const res = await getAppSettingItems()
      dataSource.value = res.data
    }

    onMounted(initSettingItems)

    return () => (
      <Drawer open={open.value} width="30%" title="应用配置" onClose={() => (open.value = false)}>
        <Table columns={columns} dataSource={dataSource.value}>
        </Table>
        <AppSettingItemsView ref="appSettingItemsView" />
        <AppSettingItemsEdit ref="appSettingItemsEdit" />
      </Drawer>
    )
  },
})
